<template>
    <el-form-item
        :label="item.label && !item.question ? item.label : ''"
        :prop="item.prop"
    >
        <span slot="label" v-if="item.question">
            <el-tooltip :content="item.question" placement="top">
                <i class="el-icon-question"></i>
            </el-tooltip>
            {{ item.label }}
        </span>
        <div v-if="item.isCheckAll">
            <el-checkbox
                :indeterminate="item.isIndeterminate"
                v-model="item.checkAll"
                @change="onCheckAllChange"
            >
                全选
            </el-checkbox>
        </div>
        <el-checkbox-group
            :size="item.size | setSize(item.size)"
            :disabled="item.disabled"
            :min="item.min"
            :max="item.max"
            :text-color="item.textColor"
            :fill="item.fill"
            :class="item.class"
            v-model="formData[item.prop]"
            @change="onCheckBoxChange"
        >
            <template v-if="!item.type || item.type === 'default'">
                <el-checkbox
                    v-for="option in item.options"
                    :key="option[item.valueKey] || option.label"
                    :label="option[item.valueKey] || option.label"
                    :disabled="option.disabled"
                    :border="item.border"
                >
                    {{ option[item.labelKey] || option.label }}
                </el-checkbox>
            </template>
            <template v-else-if="item.type === 'button'">
                <el-checkbox-button
                    v-for="option in item.options"
                    :key="option[item.valueKey] || option.label"
                    :label="option[item.valueKey] || option.label"
                    :disabled="option.disabled"
                >
                    {{ option[item.labelKey] || option.label }}
                </el-checkbox-button>
            </template>
        </el-checkbox-group>
    </el-form-item>
</template>
<script>
import mixin from '../mixins/index.js'
export default {
    name: 'df-checkbox',
    mixins: [mixin],
    props: {
        item: {
            type: Object,
            default() {
                return {
                    /**
                     * 全选框是否显示
                     * @type Boolean
                     * @value true/false
                     */
                    isCheckAll: false,
                    /**
                     * 设置 indeterminate 状态，只负责样式控制
                     * @type Boolean
                     * @value true/false
                     */
                    isIndeterminate: false,
                    /**
                     * 全选框是否选中
                     * @type Boolean
                     * @value true/false
                     */
                    checkAll: false,
                    /**
                     * 复选按钮类型
                     * @type String
                     * @value 空\default\button
                     */
                    type: '',
                    /**
                     * 复选框是否带有边框
                     * @type Boolean
                     * @value true/false
                     */
                    border: false,
                    /**
                     * 复选框组是否禁用
                     * @type Bolean
                     * @value false/true
                     */
                    disabled: false,
                    /**
                     * 复选框组尺寸 仅对按钮形式的 Checkbox  或带有边框的 Checkbox 有效
                     * @type String
                     * @value medium / small / mini
                     * @format 当type === button 或 border === true 时添加此配置
                     */
                    size: 'medium',
                    /**
                     * 可被勾选的 checkbox 的最大数量
                     * @type Number
                     */
                    min: 1,
                    /**
                     * 可被勾选的 checkbox 的最小数量
                     * @type Number
                     */
                    max: 2,
                    /**
                     * 按钮形式的 Checkbox  激活时的文本颜色
                     * @type String
                     * @value '#ffffff'
                     * @format 当type == button 时添加此配置
                     */
                    textColor: 'fff',
                    /**
                     * 按钮形式的 Checkbox  激活时的填充色和边框色
                     * @type String
                     * @value '#409EFF'
                     */
                    fill: '#409EFF',
                    /**
                     * 复选框选项数组
                     * @type Arrray
                     * @value []
                     */
                    options: [
                        {
                            /**
                             * Checkbox 选中状态的值（只有在checkbox-group或者绑定对象类型为array时有效）
                             * @type String/Number/Boolean
                             */
                            label: '',
                            /**
                             * Checkbox  是否禁用
                             * @type Boolean
                             */
                            disabled: false,
                            /**
                             * Checkbox  的 name (如果和value一致， 可以不配置)
                             * @type String/Number
                             */
                            name: ''
                        }
                    ],
                    /**
                     * 选项用于展示的key值
                     * @type string
                     * @value 'label'
                     */
                    labelKey: 'label',
                    /**
                     * 选项用于绑定的key值
                     * @type string
                     * @value 'label'
                     */
                    valueKey: 'label',
                    /**
                     * 自定义多选框类名
                     * @type string
                     * @value ''
                     */
                    class: '',
                    /**
                     * 输入框关联的label文字
                     * @type String
                     * @value ''
                     */
                    label: ''
                }
            }
        },
        /**
         * 提交的表单项
         * @type Object
         */
        formData: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    methods: {
        /**
         * 多选框组选中值发生变化时触发
         * @param 选中的 checkbox的 label 值
         *
         */
        onCheckBoxChange(data) {
            let checkedCount = data.length
            this.item.checkAll = checkedCount === this.item.options.length
            this.item.isIndeterminate =
                checkedCount > 0 && checkedCount < this.item.options.length
            this.dispatch('baseForm', 'onCheckBoxChange', {
                data: data,
                prop: this.item.prop
            })
        },
        /**
         * 全选 选中值发生变化时触发
         * @param 选中的 checkbox的 label 值
         *
         */
        onCheckAllChange(val) {
            let options = []
            this.item.options.forEach(element => {
                options.push(element.label)
            })
            this.formData[this.item.prop] = val ? options : []
            this.item.isIndeterminate = false
            this.dispatch('baseForm', 'onCheckAllChange', {
                data: this.formData[this.item.prop]
            })
        }
    }
}
</script>
